<template>
    <div class="payment-success">
        <div class="icon-success">
            <!-- 支付成功的图标，可以用 <img> 标签引入图标 -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2l4-4m0 7a9 9 0 11-18 0a9 9 0 0118 0z" />
            </svg>
        </div>
        <h1>支付成功</h1>
        <p>您已经完成支付</p>

        <!-- 知道了按钮 -->
        <button @click="handleConfirm">知道了</button>
    </div>
</template>

<script>
export default {
    methods: {
        handleConfirm() {
            // 知道了按钮点击逻辑，比如返回首页
            this.$router.push('/orderList'); // 示例：跳转到首页
        },
    },
};
</script>

<style scoped>
.payment-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #fff;
}

.icon-success {
    margin-bottom: 5vw;
}

.icon {
    width: 35vw;
    height: 35vw;
    color: #007bff;
}

h1 {
    font-size: 7vw;
    font-weight: bold;
    margin-bottom: 1vw;
    color: #333;
}

p {
    font-size: 5vw;
    color: #666;
    margin-bottom: 4vw;
}

button {
    padding: 2vw 4vw;
    font-size: 5vw;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
</style>